<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="bg-white">
		<titleBar title="留言" isReturn="true" textAlign="center"></titleBar>
		<view class="padding-top">

			<uni-forms ref="form" :value="formData" :rules="rules" class="padding-top">

				<uni-forms-item label="留言标题" name="title" labelAlign="left" class="margin-lr-sm" labelWidth="75px">

					<uni-easyinput v-model="formData.title" placeholder="请输入标题" class="margin-lr-sm" />
				</uni-forms-item>

				<!-- 	<uni-forms-item label="留言正文" name="content" labelAlign="left" labelWidth="75px"> -->
				<!-- <mp-html :content="formData.content" editable=true selectable="true"  show-img-menu="true"><uni-easyinput v-model="formData.content" placeholder="请输入正文" /></mp-html>   -->
				<!-- <editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
					<button type="warn" @tap="undo">撤销</button> -->

				<!-- </uni-forms-item> -->
				<uni-forms-item label="邮箱地址" name="email" labelAlign="left" labelWidth="75px">
					<uni-easyinput v-model="formData.email" placeholder="请输入邮箱地址" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="captcha" labelAlign="left" labelWidth="75px">
					<uni-easyinput v-model="formData.captcha" placeholder="请输入验证码" />
					<img :src="imgUrl" alt="验证码" style="height: 32px; width: 100px; cursor: pointer;"
						@click="changeUuid">
				</uni-forms-item>
				<jinEdit placeholder="请输入正文" ref="editComponents" v-model="formData.content" @editOk="editOk" :uploadFileUrl="uploadFileUrl">
				</jinEdit>


			</uni-forms>

		</view>
		<view class=" padding flex flex-direction bg-white">
			<button class="cu-btn bg-gradual-blue lg" @tap="submit">提交</button>
		</view>



	</view>
</template>
<script>
	import titleBar from '@/components/titleBar/titleBar.vue'

	import jinEdit from '@/components/jin-edit/jin-edit.vue'
	import {
		userEmail
	} from "@/utils/validate.js"
	export default {
		components: {

			titleBar,

			jinEdit

		},


		data() {
			return {

				uploadFileUrl: 'https://www.turkeylike.cn:8900/fzulab/article/upload',
				placeholder: '开始输入...',
				uuid: '',
				messageUrl: '/messagebook/save',
				messageForm: {
					title: '',
					content: '',
					email: '',
					captcha: ''
				},
				formData: {
					title: '',
					content: '',
					email: '',
					captcha: ''
				},
				rules: {
					// 对title字段进行必填验证
					title: {
						rules: [{
								required: true,
								errorMessage: '请输入标题',
							}

						]
					},
					// 对content字段进行必填验证
					content: {
						rules: [{
							required: true,
							errorMessage: '请输入正文',
						}]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱地址',
						}, {

							validateFunction: function(rule, value, data, callback) {

								if (!userEmail(value)) {
									// 通过返回 resolve
									callback('请输入正确邮箱地址！')

								}

								return true
							}
						}, ]
					},
					// 对captcha字段进行必填验证
					captcha: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					},

				},
			}
		},
		onLoad(option) {

			this.uuid = this.generateUUID()


		},
		computed: {
			imgUrl() {
				let url = 'https://www.turkeylike.cn:8900/fzulab/messagebook/captcha.jpg?uuid=' + this.uuid
				return url
			}
		},
		onReady() {

			// 需要在onReady中设置规则
			// 使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			editOk(res) {
				/* 点击的时候触发对应的数据事件 */
				this.messageForm.content = res.html;
				


			},

			// 生成唯一标识符
			generateUUID() {
				var d = new Date().getTime();

				var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = (d + Math.random() * 16) % 16 | 0;
					d = Math.floor(d / 16);
					return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
				});
				return uuid;
			},
			changeUuid() {
				this.uuid = this.generateUUID()
			},
			submit(e) {

				//验证表单
				this.$refs.form.submit().then(res => {


					//修改密码
					uni.showModal({
						title: '提示',
						content: '确定要留言吗？',
						cancelText: '取消',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {

								this.$refs.form.submit().then(res => {
								
									console.log(this.formData.content)
									this.messageForm.title = res.title
									// this.messageForm.content = res.content
									this.messageForm.email = res.email
									this.messageForm.captcha = res.captcha

									this.messageForm.uuid = this.uuid
									// JSON.stringify(this.messageForm.content),
									var that = this
									console.log(JSON.stringify(this.messageForm.content))
									uni.request({


										url: "https://www.turkeylike.cn:8900/fzulab/messagebook/save",
										method: 'post',
										data: {
											title: this.messageForm.title,
											content: JSON.stringify(this.messageForm.content),
											email: this.messageForm.email,
											captcha: this.messageForm.captcha,
											uuid: this.messageForm.uuid

										},

										header: {
											'content-type': 'application/json;charset-utf-8',

											'token': uni.getStorageSync('token')


										},


										success(res) {

											if (res.data.code == '500') {
												uni.showToast({
													title: res.data.msg,
													icon: 'none',
													duration: 2000
												});
												that.loading = false;
												return
											}

											uni.showToast({
												title: "添加留言成功！",
												icon: 'none',
												duration: 2000
											});
											
											that.formData.title = ''
											
											that.formData.email = ''
											that.formData.captcha = ''
                                           
											that.$refs.editComponents.clear();
											let currentPage =
												getCurrentPages()
												.pop(); //当前页面
											if (currentPage ==
												undefined ||
												currentPage == null
											) return;
											currentPage
												.onLoad(); //页面存在刷新当前页面




										}
									})





									// this.$http.put(this.changePwdUrl, this.changePwdMsg)
									// 	.then(res => {
									// 		console.log("res", res)
									// 		if (res.data.success) {
									// 			let perArr = res.data.result
									// 			// this.recordDetilList.picture = 'http://192.168.1.211:8080/jeecg-boot/' + perArr.picture
									// 			uni.showToast({
									// 				title: '修改成功，请返回登录',
									// 				icon: 'none',
									// 				success: function(res) {
									// 					//清除缓存

									// 					uni.removeStorageSync(
									// 						'diaryMsg')
									// 					setTimeout(() => {
									// 						uni.reLaunch({
									// 							url: '/pages/common/exit'
									// 						})
									// 					}, 500)
									// 				}
									// 			})
									// 		} else {
									// 			uni.showToast({
									// 				title: res.data.message +
									// 					',请重新输入',
									// 				icon: 'none',
									// 			})

									// 			this.formData.oldPwd = ''
									// 			this.formData.Pwd = ''
									// 			this.formData.newPwd = ''
									// 		}
									// 	}).catch(err => {
									// 		console.log(err);
									// 	});


								}).catch(err => {

									console.log('表单错误信息：', err);
								})

							}
						}
					})
				}).catch(err => {

					console.log('表单错误信息：', err);

				})








			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 200rpx 0;
	}

	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}

	button {
		margin-top: 10px;
	}
</style>
